<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>menu</title>
  <!-- 组件样式（全部的） -->
  <link rel="stylesheet" href="../../dist/tdesign.css">
  <!--
      TDesign 图标库，桌面端与移动端用同样的资源
      使用方式：<i class="t-icon t-icon-delete"></i>
    -->
  <link rel="stylesheet" href="https://tdesign.gtimg.com/icon/0.0.3/fonts/index.css">

</head>

<body>
  <div class="tdesign-demo-wrap">

    <!-- 开发者信息 -->
    <div class="tdesign-demo-wrap__name">
      <h1 class="">Menu</h1>
      <p class="tdesign-demo-wrap__info">开发者：erikqin</p>
      <p class="tdesign-demo-wrap__info">创建日期：2020-06-10</p>
      <p class="tdesign-demo-wrap__info">说明：TDesign menu 组件的基本样式</p>
    </div>

    <!-- 组件开始区 -->


    <!-- 默认样式 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">默认</h2>

      <h3 class="tdesign-demo-item__subtitle">顶部导航</h3>
      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <h4>1.单层导航</h4>
          <br />
          <div class="t-head-menu">
            <div class="t-head-menu__inner">
              <div class="t-menu__logo">
                <img class="tdesign-demo-menu__logo"
                  src="https://main.qcloudimg.com/raw/9fe1217de2bd7eb623f70648a046e341/head-logo.png" alt="logo">
              </div>
              <ul class="t-menu">
                <li class="t-menu__item">内容列表一</li>
                <li class="t-menu__item t-is-active">已选内容</li>
                <li class="t-menu__item t-is-disabled">内容列表二</li>
                <li class="t-menu__item">内容列表三</li>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <a href="javascript:;"><i class="t-icon t-icon-ellipsis"></i></a>
                <a href="javascript:;"><i class="t-icon t-icon-ellipsis"></i></a>
                <a href="javascript:;"><i class="t-icon t-icon-ellipsis"></i></a>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>

      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <h4>2.双层导航</h4>
          <br />
          <div class="t-head-menu t-menu--dark t-menu-mode__tile">
            <div class="t-head-menu__inner">
              <div class="t-menu__logo">
                <img class="tdesign-demo-menu__logo"
                  src="https://main.qcloudimg.com/raw/4927884bb0c43e726c5915d5bef49ef3/head-logo-dark.png" alt="logo">
              </div>
              <ul class="t-menu">
                <li class="t-menu__item">
                  菜单1
                </li>
                <li class="t-menu__item t-is-active">
                  菜单2
                </li>
                <li class="t-menu__item">
                  菜单3
                </li>
                <li class="t-menu__item">菜单4</li>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <a href="javascript:;"><i class="t-icon t-icon-ellipsis"></i></a>
                <a href="javascript:;"><i class="t-icon t-icon-ellipsis"></i></a>
                <a href="javascript:;"><i class="t-icon t-icon-ellipsis"></i></a>
              </div>
            </div>
            <ul class="t-head-menu__submenu t-submenu">
              <li class="t-submenu__item t-is-active" value="1">1-1</li>
              <li class="t-submenu__item" value="2">1-2</li>
              <li class="t-submenu__item" value="3">1-3</li>
            </ul>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>

      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block" style="padding-bottom: 200px">
          <h4>3.多层收纳导航</h4>
          <br />
          <div class="t-head-menu t-menu--dark t-menu-mode__popup">
            <div class="t-head-menu__inner">
              <div class="t-menu__logo">
                <img class="tdesign-demo-menu__logo"
                  src="https://main.qcloudimg.com/raw/4927884bb0c43e726c5915d5bef49ef3/head-logo-dark.png" alt="logo">
              </div>
              <ul class="t-menu">
                <li class="t-menu__item t-submenu t-is-active t-is-opened">
                  菜单1
                  <i class="t-icon t-icon-arrow-down"></i>
                  <ul class="t-menu__popup t-is-opened">
                    <li class="t-menu__item t-is-active">子菜单1-1</li>
                    <li class="t-menu__item">子菜单1-2</li>
                    <li class="t-menu__item">子菜单1-3</li>
                  </ul>
                </li>
                <li class="t-menu__item t-submenu">
                  菜单2
                  <ul class="t-menu__popup">
                    <li class="t-menu__item">子菜单2-1</li>
                    <li class="t-menu__item">子菜单2-2</li>
                    <li class="t-menu__item">子菜单2-3</li>
                  </ul>
                </li>
                <li class="t-menu__item t-submenu">
                  菜单3
                  <ul class="t-menu__popup">
                    <li class="t-menu__item">子菜单3-1</li>
                    <li class="t-menu__item">子菜单3-2</li>
                    <li class="t-menu__item">子菜单3-3</li>
                  </ul>
                </li>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <a href="javascript:;"><i class="t-icon t-icon-ellipsis"></i></a>
                <a href="javascript:;"><i class="t-icon t-icon-ellipsis"></i></a>
                <a href="javascript:;"><i class="t-icon t-icon-ellipsis"></i></a>
              </div>
            </div>
          </div>

          <div class="t-head-menu t-menu-mode__popup" style="margin-top: 200px">
            <div class="t-head-menu__inner">
              <div class="t-menu__logo">
                <img class="tdesign-demo-menu__logo"
                  src="https://main.qcloudimg.com/raw/9fe1217de2bd7eb623f70648a046e341/head-logo.png" alt="logo">
              </div>
              <ul class="t-menu">
                <li class="t-menu__item t-submenu t-is-active t-is-opened">
                  <span>菜单11</span>
                  <i class="t-icon t-icon-arrow-down"></i>
                  <ul class="t-menu__popup t-is-opened">
                    <li class="t-menu__item t-is-active">子菜单1-1</li>
                    <li class="t-menu__item">子菜单1-2</li>
                    <li class="t-menu__item">子菜单1-3</li>
                  </ul>
                </li>
                <li class="t-menu__item t-submenu">
                  菜单2
                  <ul class="t-menu__popup">
                    <li class="t-menu__item">子菜单2-1</li>
                    <li class="t-menu__item">子菜单2-2</li>
                    <li class="t-menu__item">子菜单2-3</li>
                  </ul>
                </li>
                <li class="t-menu__item t-submenu">
                  菜单3
                  <ul class="t-menu__popup">
                    <li class="t-menu__item">子菜单3-1</li>
                    <li class="t-menu__item">子菜单3-2</li>
                    <li class="t-menu__item">子菜单3-3</li>
                  </ul>
                </li>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <a href="javascript:;"><i class="t-icon t-icon-ellipsis"></i></a>
                <a href="javascript:;"><i class="t-icon t-icon-ellipsis"></i></a>
                <a href="javascript:;"><i class="t-icon t-icon-ellipsis"></i></a>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>

      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <h4>4.可自定义顶部导航</h4>
          <br />
          <div class="t-head-menu t-menu--dark">
            <div class="t-head-menu__inner">
              <div class="t-menu__logo">
                <img class="tdesign-demo-menu__logo"
                  src="https://main.qcloudimg.com/raw/4927884bb0c43e726c5915d5bef49ef3/head-logo-dark.png" alt="logo">
              </div>
              <ul class="t-menu">
                <li class="t-menu__item">内容列表一</li>
                <li class="t-menu__item t-is-active">已选内容</li>
                <li class="t-menu__item">内容列表二</li>
                <li class="t-menu__item">内容列表三</li>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <div class="tdesign-demo-menu__block">自定义内容区域</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>

      <h3 class="tdesign-demo-item__subtitle">侧边导航</h3>
      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <h4>1.单层导航</h4>
          <br />
          <div class="t-default-menu t-default-menu__demo--height mr-48">
            <div class="t-default-menu__inner">
              <div class="t-menu__logo">
                <img src="https://main.qcloudimg.com/raw/9fe1217de2bd7eb623f70648a046e341/head-logo.png" alt="logo">
              </div>
              <ul class="t-menu">
                <li class="t-menu__item">
                  <i class="t-icon t-icon-user"></i>
                  <span class="t-menu__content">侧边内容一</span>
                </li>
                <li class="t-menu__item t-is-active">
                  <i class="t-icon t-icon-user"></i>
                  <span class="t-menu__content">已选内容</span>
                </li>
                <li class="t-menu__item t-is-disabled">
                  <i class="t-icon t-icon-user"></i>
                  <span class="t-menu__content">侧边内容二</span>
                </li>
                <li class="t-menu__item">
                  <i class="t-icon t-icon-user"></i>
                  <span class="t-menu__content">侧边内容三</span>
                </li>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <i class="t-icon t-icon-arrow-left"></i>
              </div>
            </div>
          </div>
          <div class="t-default-menu t-default-menu__demo--height">
            <div class="t-default-menu__inner">
              <div class="t-menu__logo">
                <img src="https://main.qcloudimg.com/raw/9fe1217de2bd7eb623f70648a046e341/head-logo.png" alt="logo">
              </div>
              <ul class="t-menu">
                <li class="t-menu__item">侧边内容一</li>
                <li class="t-menu__item t-is-active">已选内容</li>
                <li class="t-menu__item">侧边内容二</li>
                <li class="t-menu__item">侧边内容三</li>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <i class="t-icon t-icon-arrow-left"></i>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>

      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <h4>2.平铺式侧边导航</h4>
          <br />
          <div class="t-default-menu t-default-menu__demo--height mr-48">
            <div class="t-default-menu__inner">
              <div class="t-menu__logo">
                <img src="https://main.qcloudimg.com/raw/9fe1217de2bd7eb623f70648a046e341/head-logo.png" alt="logo">
              </div>
              <ul class="t-menu">
                <div class="t-submenu">
                  <li class="t-menu__item">
                    <i class="t-icon t-icon-user"></i>
                    <span class="t-menu__content">侧边内容二</span>
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__dropdown">
                    <li class="t-menu__item t-is-active">已选内容</li>
                    <li class="t-menu__item">侧边子内容三</li>
                    <li class="t-menu__item">侧边子内容四</li>
                  </ul>
                </div>
                <div class="t-submenu t-is-active">
                  <li class="t-menu__item">
                    <i class="t-icon t-icon-user"></i>
                    <span class="t-menu__content">侧边内容二</span>
                    <i class="t-icon t-icon-arrow-up t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__sub t-is-opened">
                    <li class="t-menu__item t-is-active" style="padding-left: 48px;">已选内容</li>
                    <li class="t-menu__item" style="padding-left: 48px;">侧边子内容三</li>
                    <li class="t-menu__item" style="padding-left: 48px;">侧边子内容四</li>
                  </ul>
                </div>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <i class="t-icon t-icon-arrow-left"></i>
              </div>
            </div>
          </div>
          <div class="t-default-menu t-default-menu__demo--height mr-48">
            <div class="t-default-menu__inner">
              <div class="t-menu__logo">
                <img src="https://main.qcloudimg.com/raw/9fe1217de2bd7eb623f70648a046e341/head-logo.png" alt="logo">
              </div>
              <ul class="t-menu">
                <div class="t-submenu">
                  <li class="t-menu__item">
                    <span class="t-menu__content">侧边内容二</span>
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__sub">
                    <li class="t-menu__item t-is-active">已选子内容</li>
                    <li class="t-menu__item">侧边子内容三</li>
                    <li class="t-menu__item">侧边子内容四</li>
                  </ul>
                </div>
                <div class="t-submenu t-is-active t-is-opened">
                  <li class="t-menu__item">
                    <span class="t-menu__content">侧边内容三</span>
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__sub t-is-opened">
                    <li class="t-menu__item t-is-active" style="padding-left: 32px;">已选子内容</li>
                    <li class="t-menu__item" style="padding-left: 32px;">侧边子内容三</li>
                    <li class="t-menu__item" style="padding-left: 32px;">侧边子内容四</li>
                  </ul>
                </div>
                <div class="t-submenu t-is-opened">
                  <li class="t-menu__item">
                    侧边内容三
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__sub">
                    <li class="t-menu__item">已选子内容</li>
                    <li class="t-menu__item">侧边子内容三</li>
                    <li class="t-menu__item">侧边子内容四</li>
                  </ul>
                </div>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <i class="t-icon t-icon-arrow-left"></i>
              </div>
            </div>
          </div>
          <div class="t-default-menu t-default-menu__demo--height t-menu--dark mr-48">
            <div class="t-default-menu__inner">
              <div class="t-menu__logo">
                <img src="https://main.qcloudimg.com/raw/4927884bb0c43e726c5915d5bef49ef3/head-logo-dark.png" alt="logo">
              </div>
              <ul class="t-menu">
                <div class="t-submenu">
                  <li class="t-menu__item">
                    <i class="t-icon t-icon-user"></i>
                    <span class="t-menu__content">侧边内容二</span>
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__dropdown">
                    <li class="t-menu__item t-is-active">已选内容</li>
                    <li class="t-menu__item">侧边子内容三</li>
                    <li class="t-menu__item">侧边子内容四</li>
                  </ul>
                </div>
                <div class="t-submenu t-is-active">
                  <li class="t-menu__item">
                    <i class="t-icon t-icon-user"></i>
                    <span class="t-menu__content">侧边内容二</span>
                    <i class="t-icon t-icon-arrow-up t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__sub t-is-opened">
                    <li class="t-menu__item t-is-active" style="padding-left: 48px;">已选内容</li>
                    <li class="t-menu__item" style="padding-left: 48px;">侧边子内容三</li>
                    <li class="t-menu__item" style="padding-left: 48px;">侧边子内容四</li>
                  </ul>
                </div>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <i class="t-icon t-icon-arrow-left"></i>
              </div>
            </div>
          </div>
          <div class="t-default-menu t-default-menu__demo--height t-menu--dark">
            <div class="t-default-menu__inner">
              <div class="t-menu__logo">
                <img src="https://main.qcloudimg.com/raw/4927884bb0c43e726c5915d5bef49ef3/head-logo-dark.png" alt="logo">
              </div>
              <ul class="t-menu">
                <div class="t-submenu">
                  <li class="t-menu__item">
                    侧边内容二
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__sub">
                    <li class="t-menu__item t-is-active">已选子内容</li>
                    <li class="t-menu__item">侧边子内容三</li>
                    <li class="t-menu__item">侧边子内容四</li>
                  </ul>
                </div>
                <div class="t-submenu t-is-active t-is-opened">
                  <li class="t-menu__item">
                    侧边内容三
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__sub t-is-opened">
                    <li class="t-menu__item t-is-active" style="padding-left: 32px;">已选子内容</li>
                    <li class="t-menu__item" style="padding-left: 32px;">侧边子内容三</li>
                    <li class="t-menu__item" style="padding-left: 32px;">侧边子内容四</li>
                  </ul>
                </div>
                <div class="t-submenu t-is-opened">
                  <li class="t-menu__item">
                    侧边内容三
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__sub">
                    <li class="t-menu__item">已选子内容</li>
                    <li class="t-menu__item">侧边子内容三</li>
                    <li class="t-menu__item">侧边子内容四</li>
                  </ul>
                </div>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <i class="t-icon t-icon-arrow-left"></i>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>

      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <h4>3.弹层式侧边导航</h4>
          </br>
          <div class="t-default-menu t-default-menu__demo--height" style="margin-right: 260px;">
            <div class="t-default-menu__inner">
              <div class="t-menu__logo">
                <img src="https://main.qcloudimg.com/raw/9fe1217de2bd7eb623f70648a046e341/head-logo.png" alt="logo">
              </div>
              <ul class="t-menu">
                <div class="t-submenu">
                  <li class="t-menu__item">
                    侧边内容二
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__popup">
                    <li class="t-menu__item">已选子内容</li>
                    <li class="t-menu__item">侧边子内容三</li>
                    <li class="t-menu__item">侧边子内容四</li>
                  </ul>
                </div>
                <div class="t-submenu  t-is-active t-is-opened">
                  <li class="t-menu__item">
                    侧边内容二
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__popup t-is-opened">
                    <li class="t-menu__item t-is-active">已选子内容</li>
                    <li class="t-menu__item">侧边子内容三</li>
                    <li class="t-menu__item">侧边子内容四</li>
                  </ul>
                </div>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <i class="t-icon t-icon-arrow-left"></i>
              </div>
            </div>
          </div>

          <div class="t-default-menu t-default-menu__demo--height t-menu--dark">
            <div class="t-default-menu__inner">
              <div class="t-menu__logo">
                <img src="https://main.qcloudimg.com/raw/4927884bb0c43e726c5915d5bef49ef3/head-logo-dark.png" alt="logo">
              </div>
              <ul class="t-menu">
                <div class="t-submenu">
                  <li class="t-menu__item">
                    侧边内容二
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__popup">
                    <li class="t-menu__item">已选子内容</li>
                    <li class="t-menu__item">侧边子内容三</li>
                    <li class="t-menu__item">侧边子内容四</li>
                  </ul>
                </div>
                <div class="t-submenu  t-is-active t-is-opened">
                  <li class="t-menu__item">
                    侧边内容二
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__popup t-is-opened">
                    <li class="t-menu__item t-is-active">已选子内容</li>
                    <li class="t-menu__item">侧边子内容三</li>
                    <li class="t-menu__item">侧边子内容四</li>
                  </ul>
                </div>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <i class="t-icon t-icon-arrow-left"></i>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>

      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <h4>4.带分类的侧边导航</h4>
          </br>
          <div class="t-default-menu t-default-menu__demo--height">
            <div class="t-default-menu__inner">
              <div class="t-menu__logo">
                <img src="https://main.qcloudimg.com/raw/9fe1217de2bd7eb623f70648a046e341/head-logo.png" alt="logo">
              </div>
              <ul class="t-menu">
                <div class="t-menu-group">
                  <div class="t-menu-group-title">
                    Classification A
                  </div>
                  <div class="t-submenu t-is-active t-is-opened">
                    <li class="t-menu__item">
                      <i class="t-icon t-icon-user"></i>
                      侧边内容二
                      <i class="t-icon t-icon-arrow-up t-submenu-icon"></i>
                    </li>
                    <ul class="t-menu__popup">
                      <li class="t-menu__item t-is-active">已选子内容</li>
                      <li class="t-menu__item">侧边子内容三</li>
                      <li class="t-menu__item">侧边子内容四</li>
                    </ul>
                  </div>
                  <div class="t-submenu">
                    <li class="t-menu__item">
                      <i class="t-icon t-icon-user"></i>
                      侧边内容二
                      <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                    </li>
                    <ul class="t-menu__sub">
                      <li class="t-menu__item t-is-active">已选子内容</li>
                      <li class="t-menu__item">侧边子内容三</li>
                      <li class="t-menu__item">侧边子内容四</li>
                    </ul>
                  </div>
                </div>
                <div class="t-menu-group">
                  <div class="t-menu-group-title">
                    Classification A
                  </div>
                  <div class="t-submenu">
                    <li class="t-menu__item">
                      <i class="t-icon t-icon-user"></i>
                      侧边内容二
                      <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                    </li>
                    <ul class="t-menu__sub">
                      <li class="t-menu__item t-is-active">已选子内容</li>
                      <li class="t-menu__item">侧边子内容三</li>
                      <li class="t-menu__item">侧边子内容四</li>
                    </ul>
                  </div>
                </div>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <i class="t-icon t-icon-arrow-left"></i>
              </div>
            </div>
          </div>
          <!-- 内容区 End-->
        </div>
      </div>

      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <h4>5.可自定义侧边导航</h4>
          <br />
          <div class="t-default-menu t-default-menu__demo--height mr-48">
            <div class="t-default-menu__inner">
              <div class="t-menu__logo">
                <img src="https://main.qcloudimg.com/raw/9fe1217de2bd7eb623f70648a046e341/head-logo.png" alt="logo">
              </div>
              <ul class="t-menu">
                <div class="tdesign-demo-menu__style demo-style1">自定义内容</div>
                <li class="t-menu__item">侧边内容一</li>
                <li class="t-menu__item t-is-active">已选内容</li>
                <li class="t-menu__item">侧边内容二</li>
                <li class="t-menu__item">侧边内容三</li>
                <div class="tdesign-demo-menu__style demo-style2">自定义内容</div>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <i class="t-icon t-icon-arrow-left"></i>
              </div>
            </div>
          </div>
          <!-- 内容区 End-->
        </div>
      </div>
    </div>

    <!-- 组件状态 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">状态</h2>

      <h3 class="tdesign-demo-item__subtitle">顶部导航</h3>
      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <!-- tdesign-demo-block block内容容器，加了上间距 -->
        <div class="tdesign-demo-block">
          <h4>1.常规状态（仅一种）</h4>
          <br />
          <div class="t-head-menu t-menu--dark">
            <div class="t-head-menu__inner">
              <div class="t-menu__logo">
                <img class="tdesign-demo-menu__logo"
                  src="https://main.qcloudimg.com/raw/4927884bb0c43e726c5915d5bef49ef3/head-logo-dark.png" alt="logo">
              </div>
              <ul class="t-menu">
                <li class="t-menu__item">内容列表一</li>
                <li class="t-menu__item t-is-active">已选内容</li>
                <li class="t-menu__item">内容列表二</li>
                <li class="t-menu__item">内容列表三</li>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <a href="javascript:;"><i class="t-icon t-icon-ellipsis"></i></a>
                <a href="javascript:;"><i class="t-icon t-icon-ellipsis"></i></a>
                <a href="javascript:;"><i class="t-icon t-icon-ellipsis"></i></a>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>

      <h3 class="tdesign-demo-item__subtitle">侧边导航</h3>
      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <!-- tdesign-demo-block block内容容器，加了上间距 -->
        <div class="tdesign-demo-block">
          <h4>1.展开态（有icon和无icon）</h4>
          <br />
          <div class="t-default-menu t-default-menu__demo--height mr-48">
            <div class="t-default-menu__inner">
              <div class="t-menu__logo">
                <img src="https://main.qcloudimg.com/raw/9fe1217de2bd7eb623f70648a046e341/head-logo.png" alt="logo">
              </div>
              <ul class="t-menu">
                <li class="t-menu__item"><i class="t-icon t-icon-user"></i>侧边内容一</li>
                <li class="t-menu__item t-is-active"><i class="t-icon t-icon-user"></i>已选内容</li>
                <li class="t-menu__item"><i class="t-icon t-icon-user"></i>侧边内容二</li>
                <li class="t-menu__item"><i class="t-icon t-icon-user"></i>侧边内容三</li>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <i class="t-icon t-icon-arrow-left"></i>
              </div>
            </div>
          </div>
          <div class="t-default-menu t-default-menu__demo--height">
            <div class="t-default-menu__inner">
              <div class="t-menu__logo">
                <img src="https://main.qcloudimg.com/raw/9fe1217de2bd7eb623f70648a046e341/head-logo.png" alt="logo">
              </div>
              <ul class="t-menu">
                <li class="t-menu__item">侧边内容一</li>
                <li class="t-menu__item t-is-active">已选内容</li>
                <li class="t-menu__item">侧边内容二</li>
                <li class="t-menu__item">侧边内容三</li>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <i class="t-icon t-icon-arrow-left"></i>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>

      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <!-- tdesign-demo-block block内容容器，加了上间距 -->
        <div class="tdesign-demo-block">
          <h4>2.收起态（有icon和无icon）</h4>
          </br>
          <div class="t-default-menu t-default-menu__demo--height t-is-collapsed">
            <div class="t-default-menu__inner">
              <div class="t-menu__logo">
                <img src="https://main.qcloudimg.com/raw/9fe1217de2bd7eb623f70648a046e341/head-logo.png" alt="logo">
              </div>
              <ul class="t-menu">
                <div class="t-submenu">
                  <li class="t-menu__item">
                    <i class="t-icon t-icon-user"></i>
                    <span>侧边内容一</span>
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__popup">
                    <li class="t-menu__item">已选子内容</li>
                    <li class="t-menu__item">侧边子内容三</li>
                    <li class="t-menu__item">侧边子内容四</li>
                  </ul>
                </div>
                <div class="t-submenu t-is-active">
                  <li class="t-menu__item">
                    <i class="t-icon t-icon-user"></i>
                    <span>侧边内容二</span>
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__popup">
                    <li class="t-menu__item t-is-active">已选子内容</li>
                    <li class="t-menu__item">侧边子内容三</li>
                    <li class="t-menu__item">侧边子内容四</li>
                  </ul>
                </div>
                <li class="t-menu__item">
                  <i class="t-icon t-icon-user"></i>
                  <span>内容列表二</span>
                  <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                </li>
                <li class="t-menu__item">
                  <i class="t-icon t-icon-user"></i>
                  <span>内容列表三</span>
                  <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <i class="t-icon t-icon-arrow-right"></i>
              </div>
            </div>
          </div>

          <!-- 宽度设置 -->
          <div style="margin-left: 300px" class="t-default-menu t-default-menu__demo--height t-is-collapsed">
            <div class="t-default-menu__inner">
              <div class="t-menu__logo">
                <img src="https://main.qcloudimg.com/raw/9fe1217de2bd7eb623f70648a046e341/head-logo.png" alt="logo">
              </div>
              <ul class="t-menu">
                <div class="t-submenu">
                  <li class="t-menu__item">
                    <span>侧边内容一</span>
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__popup">
                    <li class="t-menu__item">已选子内容</li>
                    <li class="t-menu__item">侧边子内容三</li>
                    <li class="t-menu__item">侧边子内容四</li>
                  </ul>
                </div>
                <div class="t-submenu t-is-active">
                  <li class="t-menu__item">
                    <span>侧边内容二</span>
                    <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                  </li>
                  <ul class="t-menu__popup">
                    <li class="t-menu__item t-is-active">已选子内容</li>
                    <li class="t-menu__item">侧边子内容三</li>
                    <li class="t-menu__item">侧边子内容四</li>
                  </ul>
                </div>
                <li class="t-menu__item">
                  <span>内容列表二</span>
                  <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
                </li>
                <li class="t-menu__item">
                  <span>内容列表三</span>
                  <i class="t-icon t-icon-arrow-down t-submenu-icon"></i>
              </ul>
              <div class="t-menu__options tdesign-demo-menu__options">
                <i class="t-icon t-icon-arrow-right"></i>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

    <!-- 组件尺寸 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">尺寸(如果有)</h2>

      <h3 class="tdesign-demo-item__subtitle">顶部导航</h3>
      <div class="tdesign-demo-item__body tdesign-demo-item__body__200">
        <!-- 内容区 Start-->
        <h4>1.唯一尺寸</h4>
        <br />
        <div class="t-head-menu t-menu--dark t-menu-mode__tile">
          <div class="t-head-menu__inner">
            <div class="t-menu__logo">
              <img class="tdesign-demo-menu__logo"
                src="https://main.qcloudimg.com/raw/4927884bb0c43e726c5915d5bef49ef3/head-logo-dark.png" alt="logo">
            </div>
            <ul class="t-menu">
              <li class="t-menu__item">内容列表一</li>
              <li class="t-menu__item t-is-active t-is-opened">
                已选内容
                <div class="t-head-menu__inner t-head-submenu">
                  <ul class="t-menu__popup t-is-opened">
                    <li class="t-menu__item">内容列表</li>
                    <li class="t-menu__item t-is-active">已选内容</li>
                    <li class="t-menu__item">内容列表</li>
                  </ul>
                </div>
              </li>
              <li class="t-menu__item">内容列表二</li>
              <li class="t-menu__item">内容列表三</li>
            </ul>
            <div class="t-menu__options tdesign-demo-menu__options">
              <a href="javascript:;"><i class="t-icon t-icon-user"></i></a>
              <a href="javascript:;"><i class="t-icon t-icon-user"></i></a>
              <a href="javascript:;"><i class="t-icon t-icon-user"></i></a>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>

      <h3 class="tdesign-demo-item__subtitle">侧边导航</h3>
      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <h4>1.可根据业务诉求定制宽度，宽度范围200-256px，中间宽度以8的倍数为档位变化</h4>
        </br>
        <div class="t-default-menu t-default-menu__demo--height mr-48" style="width: 200px;">
          <div class="t-default-menu__inner">
            <div class="t-menu__logo">
              <img src="https://main.qcloudimg.com/raw/9fe1217de2bd7eb623f70648a046e341/head-logo.png" alt="logo">
            </div>
            <ul class="t-menu">
              <li class="t-menu__item"><i class="t-icon t-icon-user"></i>侧边内容一</li>
              <li class="t-menu__item t-is-active"><i class="t-icon t-icon-user"></i>已选内容</li>
              <li class="t-menu__item"><i class="t-icon t-icon-user"></i>侧边内容二</li>
              <li class="t-menu__item"><i class="t-icon t-icon-user"></i>侧边内容三</li>
            </ul>
            <div class="t-menu__options tdesign-demo-menu__options">
              <i class="t-icon t-icon-arrow-left"></i>
            </div>
          </div>
        </div>
        <div class="t-default-menu t-default-menu__demo--height">
          <div class="t-default-menu__inner">
            <div class="t-menu__logo">
              <img src="https://main.qcloudimg.com/raw/9fe1217de2bd7eb623f70648a046e341/head-logo.png" alt="logo">
            </div>
            <ul class="t-menu">
              <li class="t-menu__item"><i class="t-icon t-icon-user"></i>侧边内容一</li>
              <li class="t-menu__item t-is-active"><i class="t-icon t-icon-user"></i>已选内容</li>
              <li class="t-menu__item"><i class="t-icon t-icon-user"></i>侧边内容二</li>
              <li class="t-menu__item"><i class="t-icon t-icon-user"></i>侧边内容三</li>
            </ul>
            <div class="t-menu__options tdesign-demo-menu__options">
              <i class="t-icon t-icon-arrow-left"></i>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

  </div>

</body>

</html>